<template>
  <view class="commodity-wrap">
    <view
      class="commodity-item"
      v-for="item in list"
      :key="item.id"
      @click="onCommodityClick(item.id)"
    >
      <view v-if="item.tsgResourceUrl">
        <img
          class="commodity-img"
          :src="item.tsgResourceUrl[0]"
          alt=""
          srcset=""
        />
      </view>
      <view class="commodity-info">
        <view class="commodity-name">{{ item.tsgName }}</view>
        <text class="commodity-type"> {{ item.tsgTypeList }}</text>
        <view class="commodity-integral">
          <text class="unit">权益分</text>
          <text class="num">{{ item.tsgScore }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {customNav} from "@/utils/customNav";

export default {
  props: {
    list: Array,
  },
  data() {
    return {};
  },
  methods: {
    onCommodityClick(id) {
      // customNav(`/package_shopping/pages/shopping/detail?id=${id}&type=0`)
    },
  },
};
</script>

<style lang="less" scoped>
.commodity-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  .commodity-item {
    width: calc(50% - 17rpx);
    background: @color-font;
    box-shadow: 0rpx 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    border-radius: 13rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
    .commodity-img {
      width: 100%;
    }
    .commodity-info {
      font-size: @font-size-23;
      font-family: "ali-m";
      color: @color-black;
      display: flex;
      flex-direction: column;
      padding: 16rpx 25rpx;
      background-color: @color-font;
      .commodity-type {
        font-size: @font-size-20;
        font-family: "ali";
        color: @color-grey;
        margin: 18rpx 0 30rpx;
      }
      .commodity-integral {
        font-family: "ali-b";
        font-weight: bold;
        color: @color-orange;
        .num {
          font-size: @font-size-31;
        }
        .unit {
          font-size: @font-size-23;
        }
      }
      .commodity-name {
        display: -webkit-box;
        display: -moz-box;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style>
